Dashboard Overview

Real-time insights and analytics across the entire crypto ecosystem

Tokens
BTC
Bitcoin
$56,432.21 • +2.4%
ETH
Ethereum
$3,245.67 • +1.8%
Wallets
0x7cd82dca3A34E4c...
Whale • $24.3M
Entities
Binance
Exchange • 47 wallets
3
Notifications
color: var(--text-secondary); font-size: 0.9rem; } .entity-stat-value { font-weight: 600; } .entity-card-footer { padding: 16px; border-top: 1px solid var(--border); display: flex; justify-content: center; } /* Network Visualization */ .network-viz { height: 600px; position: relative; margin-top: 24px; border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border); box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3); } .network-controls { display: flex; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } .network-filter { display: flex; gap: 10px; flex-wrap: wrap; } /* Loading Spinner */ .loading-spinner { width: 50px; height: 50px; border: 3px solid rgba(255, 255, 255, 0.1); border-top: 3px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 30px auto; } /* Empty States */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 30px; text-align: center; } .empty-state-icon { font-size: 3rem; margin-bottom: 20px; color: var(--text-tertiary); } .empty-state-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 10px; color: var(--text-secondary); } .empty-state-description { font-size: 1rem; color: var(--text-tertiary); max-width: 500px; margin-bottom: 20px; line-height: 1.6; } /* Tooltips */ .tooltip-container { position: relative; display: inline-block; } .tooltip-content { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--panel-bg-darker); color: var(--text); padding: 8px 12px; border-radius: 6px; font-size: 0.8rem; white-space: nowrap; z-index: 1000; border: 1px solid var(--border); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transition: all 0.2s ease; pointer-events: none; } .tooltip-container:hover .tooltip-content { opacity: 1; visibility: visible; bottom: calc(100% + 10px); } /* Switch Toggle */ .switch { position: relative; display: inline-block; width: 50px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.1); transition: .4s; border-radius: 24px; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: var(--primary); } input:checked + .slider:before { transform: translateX(26px); } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 30px; } .pagination-item { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; } .pagination-item:hover:not(.active) { background: rgba(255, 255, 255, 0.05); border-color: var(--border); } .pagination-item.active { background: rgba(240, 185, 11, 0.1); color: var(--primary); border-color: var(--primary); } .pagination-prev, .pagination-next { padding: 0 12px; width: auto; } /* Filter Pills */ .filter-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .filter-pill { display: flex; align-items: center; padding: 6px 12px; gap: 8px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); font-size: 0.875rem; cursor: pointer; transition: all 0.2s ease; border: 1px solid var(--border); } .filter-pill:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .filter-pill.active { background: rgba(240, 185, 11, 0.1); color: var(--primary); border-color: var(--primary); } .filter-pill i { font-size: 12px; } .filter-pill .remove { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.1); margin-left: 5px; } .filter-pill .remove:hover { background: rgba(255, 255, 255, 0.2); } /* Alert Boxes */ .alert { padding: 16px; border-radius: 10px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 12px; animation: fadeIn 0.5s ease; } .alert-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .alert-content { flex: 1; } .alert-title { font-weight: 600; margin-bottom: 5px; } .alert-message { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; } .alert-success { background: rgba(14, 203, 129, 0.1); border-left: 4px solid var(--success); } .alert-success .alert-icon { background: var(--success-light); color: var(--success); } .alert-danger { background: rgba(246, 70, 93, 0.1); border-left: 4px solid var(--danger); } .alert-danger .alert-icon { background: var(--danger-light); color: var(--danger); } .alert-warning { background: rgba(255, 154, 68, 0.1); border-left: 4px solid var(--warning); } .alert-warning .alert-icon { background: var(--warning-light); color: var(--warning); } .alert-info { background: rgba(60, 154, 249, 0.1); border-left: 4px solid var(--info); } .alert-info .alert-icon { background: var(--info-light); color: var(--info); } /* Progress Bars */ .progress-bar { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; margin: 10px 0; } .progress-bar-fill { height: 100%; border-radius: 3px; transition: width 1s ease; } .progress-bar-success .progress-bar-fill { background: var(--success); } .progress-bar-danger .progress-bar-fill { background: var(--danger); } .progress-bar-warning .progress-bar-fill { background: var(--warning); } .progress-bar-info .progress-bar-fill { background: var(--info); } .progress-bar-primary .progress-bar-fill { background: var(--primary); } /* Notifications Panel */ .notifications-panel { position: absolute; top: calc(100% + 15px); right: 0; width: 350px; background: var(--panel-bg); border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); z-index: 1000; overflow: hidden; display: none; animation: fadeIn 0.3s ease; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } .notifications-header { padding: 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); } .notifications-title { font-weight: 600; font-size: 1rem; } .notifications-actions { display: flex; gap: 8px; } .notifications-action { color: var(--text-secondary); font-size: 0.875rem; cursor: pointer; transition: color 0.2s ease; } .notifications-action:hover { color: var(--text); } .notifications-list { max-height: 400px; overflow-y: auto; } .notification-item { padding: 16px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: center; transition: all 0.2s ease; cursor: pointer; } .notification-item:hover { background: rgba(255, 255, 255, 0.05); } .notification-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .notification-icon.success { background: var(--success-light); color: var(--success); } .notification-icon.danger { background: var(--danger-light); color: var(--danger); } .notification-icon.warning { background: var(--warning-light); color: var(--warning); } .notification-icon.info { background: var(--info-light); color: var(--info); } .notification-content { flex: 1; } .notification-title { font-weight: 500; margin-bottom: 5px; font-size: 0.95rem; } .notification-message { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.4; } .notification-time { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 5px; } .notification-item.unread { background: rgba(240, 185, 11, 0.05); } .notification-item.unread::before { content: ''; width: 6px; height: 6px; background: var(--primary); border-radius: 50%; position: absolute; top: 16px; right: 16px; } .notifications-footer { padding: 12px; text-align: center; border-top: 1px solid var(--border); } /* User Menu Panel */ .user-menu-panel { position: absolute; top: calc(100% + 15px); right: 0; width: 250px; background: var(--panel-bg); border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); z-index: 1000; overflow: hidden; display: none; animation: fadeIn 0.3s ease; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } .user-menu-header { padding: 20px; display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid var(--border); background: rgba(0, 0, 0, 0.2); } .user-menu-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; color: #000; margin-bottom: 10px; box-shadow: 0 0 15px rgba(240, 185, 11, 0.3); } .user-menu-name { font-weight: 600; font-size: 1.1rem; } .user-menu-role { color: var(--text-secondary); font-size: 0.875rem; } .user-menu-links { padding: 10px 0; } .user-menu-link { padding: 12px 20px; display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; transition: all 0.2s ease; } .user-menu-link:hover { background: rgba(255, 255, 255, 0.05); } .user-menu-link i { width: 20px; text-align: center; color: var(--text-secondary); } .user-menu-footer { padding: 15px 20px; border-top: 1px solid var(--border); } .logout-btn { width: 100%; padding: 10px; background: rgba(246, 70, 93, 0.1); color: var(--danger); border: 1px solid rgba(246, 70, 93, 0.2); border-radius: 8px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all 0.2s ease; } .logout-btn:hover { background: rgba(246, 70, 93, 0.15); transform: translateY(-2px); } /* Earth Globe Animation */ .globe-container { width: var(--logo-size); height: var(--logo-size); position: relative; transform-style: preserve-3d; perspective: 800px; transition: all 0.3s ease; } .globe { width: 100%; height: 100%; border-radius: 50%; background: url('https://images.unsplash.com/photo-1614730321146-b6fa6a46bcb4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') no-repeat center center; background-size: cover; position: relative; overflow: hidden; transform-style: preserve-3d; animation: rotate 20s linear infinite; box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 10px var(--yellow-light), 0 0 20px rgba(240, 185, 11, 0.5); } .globe::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, rgba(240, 185, 11, 0.1) 50%, rgba(0, 0, 0, 0.5) 100%); border-radius: 50%; } .glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 30px var(--yellow-light); animation: pulse 3s ease-in-out infinite alternate; } @keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeSlideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 0.8; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } /* Data Card - for token details */ .data-card { padding: 20px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all 0.3s ease; } .data-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); border-color: var(--border-strong); background: rgba(255, 255, 255, 0.05); } .data-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .data-card-title { font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .data-card-title i { color: var(--primary); } .data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; } .data-item { display: flex; flex-direction: column; } .data-label { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 5px; } .data-value { font-size: 1.2rem; font-weight: 600; } /* Responsive */ @media (max-width: 1200px) { .sidebar { width: var(--sidebar-collapsed); } .sidebar-logo h1, .sidebar-menu-item span, .sidebar-footer-text { opacity: 0; width: 0; margin: 0; } .sidebar-logo { justify-content: center; } .main-content { margin-left: var(--sidebar-collapsed); } .dashboard-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .header { flex-direction: column; align-items: flex-start; gap: 15px; } .header-actions { width: 100%; flex-direction: column; } .search-bar, .search-bar input { width: 100%; } .market-stats { grid-template-columns: 1fr 1fr; } .tokens-table th:nth-child(4), .tokens-table td:nth-child(4), .tokens-table th:nth-child(5), .tokens-table td:nth-child(5) { display: none; } .dashboard-card { padding: 15px; } .entity-grid { grid-template-columns: 1fr; } }
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence
.token-change.negative { background: var(--danger-light); } .token-chart { width: 120px; height: 40px; position: relative; } .token-chart-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%, 100% 100%, 0 100%); } .token-chart-placeholder.positive { background: linear-gradient(180deg, rgba(15, 202, 129, 0.3) 0%, rgba(15, 202, 129, 0) 100%); } .token-chart-placeholder.negative { background: linear-gradient(180deg, rgba(246, 70, 93, 0.3) 0%, rgba(246, 70, 93, 0) 100%); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%, 100% 100%, 0 100%); } .token-sparkline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-sparkline.positive { border-bottom: 2px solid rgba(15, 202, 129, 0.7); clip-path: polygon(0 70%, 10% 65%, 20% 60%, 30% 55%, 40% 60%, 50% 50%, 60% 45%, 70% 40%, 80% 45%, 90% 35%, 100% 30%); } .token-sparkline.negative { border-bottom: 2px solid rgba(246, 70, 93, 0.7); clip-path: polygon(0 30%, 10% 35%, 20% 40%, 30% 45%, 40% 40%, 50% 50%, 60% 55%, 70% 60%, 80% 55%, 90% 65%, 100% 70%); } /* Wallet Section */ .wallet-container { margin-top: 30px; } .wallet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .wallet-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wallet-title i { color: var(--primary); } .wallet-actions { display: flex; gap: 12px; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .wallet-table td { padding: 16px; border-bottom: 1px solid var(--border); } .wallet-table tbody tr { transition: all var(--transition-speed) ease; } .wallet-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wallet-address { font-family: monospace; color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .wallet-address .copy-icon { opacity: 0; transition: opacity var(--transition-speed) ease; cursor: pointer; color: var(--primary); } .wallet-address:hover .copy-icon { opacity: 1; } .wallet-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; background: var(--info-light); color: var(--info); } .wallet-tag.exchange { background: var(--warning-light); color: var(--warning); } .wallet-tag.whale { background: var(--yellow-light); color: var(--yellow); } .wallet-tag.team { background: var(--purple-light); color: var(--purple); } .activity-chart { width: 120px; height: 40px; display: flex; align-items: flex-end; gap: 2px; } .activity-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: height 1s ease; opacity: 0.8; } .activity-bar:hover { opacity: 1; box-shadow: var(--glow-gold); } /* Signal Section */ .signal-card { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 20px; transition: all var(--transition-speed) ease; position: relative; overflow: hidden; } .signal-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .signal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--success); opacity: 0.5; } .signal-card.sell::before { background: var(--danger); } .signal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .signal-token { display: flex; align-items: center; gap: 16px; } .signal-token .token-logo { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .signal-info { display: flex; flex-direction: column; } .signal-info .token-info-name { font-size: 1.1rem; margin-bottom: 5px; } .signal-action { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .signal-buy { background: var(--success-light); color: var(--success); } .signal-sell { background: var(--danger-light); color: var(--danger); } .signal-details { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 8px; margin-top: 10px; } .signal-wallet { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .signal-wallet .wallet-tag { margin-left: 0; } .signal-time { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .signal-amount { font-weight: 600; font-size: 1.2rem; } /* News Section */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .news-card { border-radius: 12px; overflow: hidden; position: relative; height: 220px; transition: all 0.4s ease; border: 1px solid var(--border); } .news-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--border-strong); } .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } .news-card:hover .news-image { transform: scale(1.1); } .news-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 60%, transparent); transition: all 0.3s ease; } .news-card:hover .news-content { padding-bottom: 30px; } .news-source { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .news-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .news-time { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn:active::after { opacity: 0.2; transform: scale(60, 60) translate(-50%); transition: all 0.6s ease; } .btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 8px; } .btn-lg { padding: 12px 24px; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), #FFA000); color: #000; box-shadow: 0 5px 15px rgba(240, 185, 11, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), #FFB74D); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(240, 185, 11, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 185, 11, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success), #00A36A); color: #fff; box-shadow: 0 5px 15px rgba(14, 203, 129, 0.3); } .btn-success:hover { background: linear-gradient(135deg, #10E292, #00B877); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 203, 129, 0.4); } .btn-danger { background: linear-gradient(135deg, var(--danger), #E03A48); color: #fff; box-shadow: 0 5px 15px rgba(246, 70, 93, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #FF566D, #F04155); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(246, 70, 93, 0.4); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 20px; font-weight: 500; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; color: var(--text-secondary); white-space: nowrap; } .tab.active { border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 600; } .tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; gap: 4px; } .badge i { font-size: 10px; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-info { background: var(--info-light); color: var(--info); } .badge-purple { background: var(--purple-light); color: var(--purple); } .badge-primary { background: var(--yellow-light); color: var(--yellow); } /* Token Detail Page */ .token-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .token-detail-logo { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } .token-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .token-detail-info { flex: 1; } .token-detail-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; } .token-detail-ticker { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; margin-left: 5px; } .token-detail-price { font-size: 2.5rem; font-weight: 700; margin: 10px 0; letter-spacing: -1px; } .token-detail-stats { display: flex; gap: 30px; margin-top: 15px; } .token-detail-stat { display: flex; flex-direction: column; } .token-detail-stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px; } .token-detail-stat-value { font-size: 1.2rem; font-weight: 600; } .token-detail-actions { display: flex; gap: 12px; } /* Token Distribution */ .token-distribution { margin-top: 30px; } .distribution-chart { height: 300px; position: relative; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .distribution-chart .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--primary) 0% 14%, var(--info) 14% 26%, var(--success) 26% 50%, var(--warning) 50% 100% ); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: relative; } .distribution-chart .donut-chart::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: var(--panel-bg); } .distribution-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; } .distribution-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; transition: all var(--transition-speed) ease; } .distribution-legend-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } .distribution-legend-color { width: 16px; height: 16px; border-radius: 4px; } .distribution-legend-text { display: flex; flex-direction: column; } .distribution-legend-name { font-size: 0.875rem; font-weight: 500; } .distribution-legend-value { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } /* Token Holders */ .token-holders { margin-top: 30px; } .holder-table { width: 100%; border-collapse: collapse; } .holder-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .holder-table td { padding: 16px; border-bottom: 1px solid var(--border); } .holder-table tbody tr { transition: all var(--transition-speed) ease; } .holder-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateX(5px); } .holder-rank { font-weight: 600; color: var(--text-secondary); } .holder-percentage { width: 200px; } .percentage-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; } .percentage-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; } /* Wallet Detail Page */ .wallet-detail-header { margin-bottom: 30px; } .wallet-detail-address { font-size: 1.1rem; font-family: monospace; background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; border: 1px solid var(--border); } .wallet-detail-copy { display: flex; align-items: center; gap: 8px; color: var(--primary); cursor: pointer; transition: all var(--transition-speed) ease; padding: 8px 12px; border-radius: 8px; background: rgba(240, 185, 11, 0.05); } .wallet-detail-copy:hover { background: rgba(240, 185, 11, 0.1); transform: translateY(-2px); } .wallet-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .wallet-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } /* Wallet Portfolio */ .wallet-portfolio { margin-top: 30px; } .portfolio-chart { height: 300px; position: relative; margin-top: 20px; } /* Wallet Transactions */ .wallet-transactions { margin-top: 30px; } .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table th { text-align: left; padding: 16px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-bg); z-index: 10; letter-spacing: 0.5px; font-size: 13px; text-transform: uppercase; } .transaction-table td { padding: 16px; border-bottom: 1px solid var(--border); } .transaction-table tbody tr { transition: all var(--transition-speed) ease; } .transaction-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); cursor: pointer; transform: translateY(-2px); } .transaction-hash { font-family: monospace; font-size: 0.9rem; color: var(--text-secondary); } .transaction-type { display: flex; align-items: center; gap: 10px; } .transaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .transaction-icon.send { background: var(--danger-light); color: var(--danger); } .transaction-icon.receive { background: var(--success-light); color: var(--success); } .transaction-icon.swap { background: var(--info-light); color: var(--info); } .transaction-value { font-weight: 600; } .transaction-time { color: var(--text-secondary); font-size: 0.9rem; } /* Entity Explorer */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .entity-card { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .entity-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--border-strong); } .entity-card-header { padding: 20px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } .entity-logo { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #FFA000); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #000; font-size: 1.2rem; box-shadow: var(--glow-gold); } .entity-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px; } .entity-card-content { padding: 20px; } .entity-stats { display: flex; flex-direction: column; gap: 16px; } .entity-stat { display: flex; justify-content: space-between; align-items: center; } .entity-stat-label { color: var(--text-secondary); ABCryp | Premium Crypto Intelligence